<template>
    <div class="white-box">
        <title-more title="基本信息" />
        <div class="od-one">
            <div class="od-one__item">
                <detail-item title="昵称" one-value bottom="16px" :value="objs.nickname || '--'" />
                <detail-item title="总返佣" one-value bottom="16px" price-icon :value="objs.total_award || '0.00'" />
                <detail-item title="总消费" one-value bottom="16px" price-icon :value="objs.total_pay || '0.00'" />
                <detail-item title="一级下级" one-value bottom="16px" :value="`${objs.invite_one_num ? objs.invite_one_num + '个' : 0}`" />
                <detail-item title="创建时间" one-value bottom="16px" :value="objs.created_at_label" />
            </div>
            <div class="od-one__item">
                <detail-item title="手机号" one-value bottom="16px" :value="objs.mobile || '--'" />
                <detail-item title="返佣余额" one-value bottom="16px" price-icon :value="objs.award || '0.00'" />
                <detail-item title="下级会员" one-value bottom="16px" :value="objs.invite_num || '0'" />
                <detail-item title="二级下级" one-value bottom="16px" :value="`${objs.invite_two_num ? objs.invite_two_num + '个' : 0}`" />
                <detail-item title="区域级别" one-value bottom="16px" value="省级运营中心" v-if="objs.is_partner == 1 && objs.partner_level == 1" />
                <detail-item
                    title="区域级别"
                    one-value
                    bottom="16px"
                    :value="objs.partner_level == 2 ? '市级运营中心' : '县级运营中心'"
                    v-if="objs.is_partner == 1 && objs.partner_level > 1"
                />
            </div>
            <div class="od-one__item">
                <detail-item title="余额" one-value bottom="16px" price-icon :value="objs.money || '0.00'" />
                <detail-item title="授信额度" one-value bottom="16px" price-icon :value="objs.credit || '0.00'" />
                <detail-item title="累计订单" one-value bottom="16px" :value="objs.orders || '0'" />
                <detail-item title="三级下级" one-value bottom="16px" :value="`${objs.invite_three_num ? objs.invite_three_num + '个' : 0}`" />
                <detail-item title="代理等级" one-value bottom="16px" value="一级代理商" v-if="objs.is_agent == 1 && objs.agent_level == 1" />
                <detail-item
                    title="代理等级"
                    one-value
                    bottom="16px"
                    :value="objs.agent_level == 2 ? '二级代理商' : '三级代理商'"
                    v-if="objs.is_agent == 1 && objs.agent_level > 1"
                />
            </div>
        </div>

        <title-more title="下级列表" />
        <el-tabs v-model="tabName" type="card">
            <el-tab-pane :label="`下级非区域代理商(${agent_nums})`" name="0">
                <el-table
                    class="table-mb"
                    :data="agentArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-loading="agent_loading"
                >
                    <el-table-column label="代理商信息" width="340">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-round"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.face + '!img_400'"
                                    fit="cover"
                                    v-if="row.face"
                                />
                                <div class="table-lr__right">
                                    <div>
                                        <p class="lr-title line-one" style="font-size: 15px">{{ row.nickname }}</p>
                                    </div>
                                    <p class="lr-text">UID：{{ row.uid }}</p>
                                    <p class="lr-text">手机号：{{ row.mobile }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="代理商等级" min-width="120">
                        <template #default="{ row }">
                            <p v-if="row.agent_level == 1">一级代理</p>
                            <p v-else>{{ row.agent_level == 1 ? "二级代理" : "三级代理" }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_money" label="总消费金额" min-width="120"></el-table-column>
                    <el-table-column prop="created_at_label" label="加入时间" width="160"></el-table-column>
                    <el-table-column prop="agent_time_label" label="成为代理时间" width="160"></el-table-column>
                    <el-table-column label="地区" min-width="180">
                        <template #default="{ row }">
                            <p>{{ row.province + row.city + row.district }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="级别" width="110">
                        <template #default="{ row }">{{ row.distance == 1 ? "直接下级" : "间接下级" }}</template>
                    </el-table-column>
                </el-table>
                <el-pagination background v-model:current-page="agent_page" :page-size="20" :total="agent_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane :label="`下级区域代理商(${area_nums})`" name="1">
                <el-table
                    class="table-mb"
                    :data="areaArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-loading="area_loading"
                >
                    <el-table-column label="区域代理信息" width="320">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-round"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.face + '!img_400'"
                                    fit="cover"
                                    v-if="row.face"
                                />
                                <div class="table-lr__right">
                                    <div>
                                        <p class="lr-title line-one" style="font-size: 15px">{{ row.nickname }}</p>
                                    </div>
                                    <p class="lr-text">UID：{{ row.uid }}</p>
                                    <p class="lr-text">手机号：{{ row.mobile }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域代理等级" min-width="140">
                        <template #default="{ row }">
                            <p v-if="row.partner == 1">省级运营中心</p>
                            <p v-else>{{ row.partner == 2 ? "市级运营中心" : "县级运营中心" }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_money" label="总消费金额" min-width="120"></el-table-column>
                    <el-table-column prop="created_at_label" label="加入时间" width="160"></el-table-column>
                    <el-table-column prop="partner_time_label" label="成为运营时间" width="160"></el-table-column>
                    <el-table-column label="地区" min-width="180">
                        <template #default="{ row }">
                            <p>{{ row.province + row.city + row.district }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="级别" width="110">
                        <template #default="{ row }">{{ row.distance == 1 ? "直接下级" : "间接下级" }}</template>
                    </el-table-column>
                </el-table>
                <el-pagination background v-model:current-page="area_page" :page-size="20" :total="area_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane :label="`下级会员(${user_nums})`" name="2">
                <el-table
                    class="table-mb"
                    :data="memberArrs"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-loading="user_loading"
                >
                    <el-table-column label="会员信息" width="320">
                        <template #default="{ row }">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-round"
                                    loading="lazy"
                                    :src="proxy.imgUrl + row.face + '!img_400'"
                                    fit="cover"
                                    v-if="row.face"
                                />
                                <div class="table-lr__right">
                                    <div>
                                        <p class="lr-title line-one" style="font-size: 15px">{{ row.nickname }}</p>
                                    </div>
                                    <p class="lr-text">UID：{{ row.uid }}</p>
                                    <p class="lr-text">手机号：{{ row.mobile }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="member_level" label="会员等级" min-width="120">
                        <template #default="{ row }">
                            <p v-if="row.grade_id > 0">{{ row.grade.level_name }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_pay" label="总消费金额" min-width="120"></el-table-column>
                    <el-table-column prop="created_at_label" label="加入时间" width="160"></el-table-column>
                    <el-table-column label="地区" min-width="180">
                        <template #default="{ row }">
                            <p>{{ row.province + row.city + row.district }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="级别" width="110">
                        <template #default="{ row }">{{ row.distance == 1 ? "直接下级" : "间接下级" }}</template>
                    </el-table-column>
                </el-table>
                <el-pagination background v-model:current-page="member_page" :page-size="20" :total="member_total" layout="total, prev, pager, next, jumper">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="图表展示" name="3">
                <div class="tree-box">
                    <vue3-tree-org
                        lazy
                        :data="treeData"
                        :horizontal="true"
                        :collapsable="true"
                        :node-draggable="false"
                        :draggable-on-node="true"
                        :disabled="true"
                        :load="onNodeClick"
                    >
                        <template v-slot="{ node }">
                            <div class="user-list">
                                <div class="tree-node__item">
                                    <el-image
                                        class="tree-node__left"
                                        loading="lazy"
                                        :src="node.label.face ? `${proxy.imgUrl + node.label.face}!img_400` : ''"
                                        fit="cover"
                                    />
                                    <div class="tree-node__right">
                                        <p class="tree-node__title line-one">{{ node.label.nickname ? node.label.nickname : "--" }}</p>
                                        <p class="tree-node__text">UID：{{ node.id }}</p>
                                        <p class="tree-node__text">手机：{{ node.label.mobile ? node.label.mobile : "--" }}</p>
                                        <p class="tree-node__text" style="margin-bottom: 14px">
                                            消费：<em>￥</em>{{ node.label.total_money ? node.label.total_money : "--" }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </vue3-tree-org>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRoute } from "vue-router"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import DetailItem from "@components/DetailItem.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

let uid = route.query.uid
onMounted(() => {
    uid && getDetail()
})

const tabName = ref("0")
const agent_nums = ref(0)
const area_nums = ref(0)
const user_nums = ref(0)
const objs = ref({})
function getDetail() {
    proxy.$axios
        .get("agent/inviteUser", {
            params: {
                from: "detail",
                uid,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                agent_nums.value = result.invite_agent_num
                area_nums.value = result.invite_partner_num
                user_nums.value = result.invite_user_num

                objs.value = result
                getAgent()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 下级代理商
 * @param {Boolean} agent_loading 表格加载
 * @param {Number} agent_page 页码
 * @param {Number} agent_total 总数
 * @param {Array} agentArrs 商品数组
 */
const agent_loading = ref(false)
const agent_page = ref(1)
const agent_total = ref(0)
const agentArrs = ref([])
watch(agent_page, (val) => {
    agentArrs.value = []
    getAgent()
})
function getAgent() {
    agent_loading.value = true
    proxy.$axios
        .get("agent/inviteUser", {
            params: {
                page: agent_page.value,
                limit: 20,
                from: "agent",
                uid,
            },
        })
        .then((res) => {
            agent_loading.value = false
            if (res.data.code == 0) {
                let result = res.data.data
                agent_total.value = res.data.count
                agentArrs.value = result
                getAreaUser()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            agent_loading.value = false
        })
}

/**
 * 下级区域代理
 * @param {Boolean} area_loading 表格加载
 * @param {Number} area_page 页码
 * @param {Number} area_total 总数
 * @param {Array} areaArrs 商品数组
 */
const area_loading = ref(false)
const area_page = ref(1)
const area_total = ref(0)
const areaArrs = ref([])
watch(area_page, (val) => {
    areaArrs.value = []
    getAreaUser()
})
function getAreaUser() {
    area_loading.value = true
    proxy.$axios
        .get("agent/inviteUser", {
            params: {
                page: area_page.value,
                limit: 20,
                from: "partner",
                uid,
            },
        })
        .then((res) => {
            area_loading.value = false
            if (res.data.code == 0) {
                let result = res.data.data
                area_total.value = res.data.count
                areaArrs.value = result
                getMember()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            area_loading.value = false
        })
}

/**
 * 下级会员
 * @param {Boolean} user_loading 表格加载
 * @param {Number} member_page 页码
 * @param {Number} member_total 总数
 * @param {Array} agentArrs 商品数组
 */
const user_loading = ref(false)
const member_page = ref(1)
const member_total = ref(0)
const memberArrs = ref([])
watch(member_page, (val) => {
    memberArrs.value = []
    getMember()
})
function getMember() {
    user_loading.value = true
    proxy.$axios
        .get("agent/inviteUser", {
            params: {
                page: member_page.value,
                limit: 20,
                from: "user",
                uid,
            },
        })
        .then((res) => {
            user_loading.value = false
            if (res.data.code == 0) {
                let result = res.data.data
                member_total.value = res.data.count
                memberArrs.value = result

                getTrees(uid)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            user_loading.value = false
        })
}

/**
 * 关系图
 * @param {Boolean} horizontal 是否是横向
 * @param {Boolean} collapsable 是否可以展开收起节点
 * @param {Function} node-expand 点击展开按钮事件
 */
const treeData = ref({
    id: "",
    label: {},
    children: [],
})
const onNodeClick = (item) => {
    item.children = []
    proxy.$axios
        .get("agent/inviteUser", {
            params: {
                from: "topology",
                uid: item.id,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                result.map((sub) => {
                    item.children.push({
                        id: sub.uid,
                        label: {
                            nickname: sub.nickname,
                            face: sub.face,
                            mobile: sub.mobile,
                            total_money: sub.total_money,
                        },
                        noDragging: true,
                        children: [],
                    })
                })
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

function getTrees(uid) {
    proxy.$axios
        .get("agent/inviteUser", {
            params: {
                from: "topology",
                uid,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                result.map((item) => {
                    item.children = []
                })
                treeData.value = {
                    id: objs.value.uid,
                    label: {
                        nickname: objs.value.nickname,
                        face: objs.value.face,
                        mobile: objs.value.mobile,
                        total_money: objs.value.total_money,
                    },
                    noDragging: true,
                    children: result,
                }
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "AgentMember",
}
</script>

<style lang="less" scoped>
.tree-box {
    width: 100%;
    height: 800px;
    overflow: auto;
}
.tree-node__item {
    display: flex;
    overflow: hidden;
    padding: 10px 12px;
    width: 300px;
    align-items: center;
    justify-content: flex-start;
    .tree-node__left {
        flex: none;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        overflow: hidden;
    }
    .tree-node__right {
        flex: 1;
        margin-left: @margin-md;
        text-align: left;
        overflow: hidden;
        .tree-node__title {
            font-size: @font-size-md;
            font-weight: bold;
            color: #111;
        }
        .tree-node__text {
            font-size: @font-size-md;
            color: @gray-7;
            margin-top: @margin-base;
            em {
                font-size: 13px;
            }
        }
    }
}
.od-one {
    display: flex;
    margin-top: @margin-md;
    margin-bottom: @margin-mdl;
    .od-one__item {
        flex: none;
        width: 33.33%;
        p {
            width: 100%;
            margin-bottom: @margin-sm;
            font-size: @font-size-md;
            color: @gray-8;
            .price-icon {
                font-size: @font-size-sm;
            }
        }
    }
}
:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }
    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;
        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}
</style>
